<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<h2 mat-dialog-title>{{ readonly ? 'Remote Process Group Details' : 'Edit Remote Process Group' }}</h2>
<form class="edit-remote-process-group-form" [formGroup]="editRemoteProcessGroupForm">
    <context-error-banner [context]="ErrorContextKey.REMOTE_PROCESS_GROUP"></context-error-banner>
    <mat-dialog-content>
        <div class="flex flex-col mb-4">
            <div>Name</div>
            <div class="tertiary-color font-medium">{{ request.entity.component.name }}</div>
        </div>
        <div class="flex flex-col mb-4">
            <div>Id</div>
            <div [copy]="request.entity.component.id" class="tertiary-color font-medium">
                {{ request.entity.component.id }}
            </div>
        </div>
        <div class="flex gap-x-4">
            <div class="w-full">
                <mat-form-field>
                    <mat-label>
                        URLs
                        <i
                            class="fa fa-info-circle"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="Specify the remote target NiFi URLs. Multiple URLs can be specified in comma-separated format. Different protocols cannot be mixed. If remote NiFi is a cluster, two or more node URLs are recommended for better connection establishment availability."></i>
                    </mat-label>
                    <input
                        matInput
                        formControlName="urls"
                        type="text"
                        placeholder="https://remotehost:8443/nifi"
                        [readonly]="readonly" />
                </mat-form-field>
            </div>
        </div>
        <div class="flex gap-x-4">
            <div class="w-full">
                <mat-form-field>
                    <mat-label>
                        Transport Protocol
                        <i
                            class="fa fa-info-circle"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="Specify the transport protocol to use for this Remote Process Group communication."></i>
                    </mat-label>
                    <mat-select formControlName="transportProtocol">
                        <mat-option value="RAW" [disabled]="readonly"> RAW</mat-option>
                        <mat-option value="HTTP" [disabled]="readonly"> HTTP</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
            <div class="w-full">
                <mat-form-field>
                    <mat-label>
                        Local Network Interface
                        <i
                            class="fa fa-info-circle"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="The local network interface to send/receive data. If not specified, any local address is used. If clustered, all nodes must have an interface with this identifier."></i>
                    </mat-label>
                    <input matInput formControlName="localNetworkInterface" type="text" [readonly]="readonly" />
                </mat-form-field>
            </div>
        </div>
        <div class="flex gap-x-4">
            <div class="w-full">
                <mat-form-field>
                    <mat-label>
                        HTTP Proxy Server Hostname
                        <i
                            class="fa fa-info-circle"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="Specify the proxy server's hostname to use. If not specified, HTTP traffics are sent directly to the target NiFi instance."></i>
                    </mat-label>
                    <input matInput formControlName="httpProxyServerHostname" type="text" [readonly]="readonly" />
                </mat-form-field>
            </div>
            <div class="w-full">
                <mat-form-field>
                    <mat-label>
                        HTTP Proxy Server Port
                        <i
                            class="fa fa-info-circle"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="Specify the proxy server's port number, optional. If not specified, default port 80 will be used."></i>
                    </mat-label>
                    <input matInput formControlName="httpProxyServerPort" type="text" [readonly]="readonly" />
                </mat-form-field>
            </div>
        </div>
        <div class="flex gap-x-4">
            <div class="w-full">
                <mat-form-field>
                    <mat-label>
                        HTTP Proxy User
                        <i
                            class="fa fa-info-circle"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="Specify an user name to connect to the proxy server, optional."></i>
                    </mat-label>
                    <input matInput formControlName="httpProxyUser" type="text" [readonly]="readonly" />
                </mat-form-field>
            </div>
            <div class="w-full">
                <mat-form-field>
                    <mat-label>
                        HTTP Proxy Password
                        <i
                            class="fa fa-info-circle"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="Specify an user password to connect to the proxy server, optional."></i>
                    </mat-label>
                    <input matInput formControlName="httpProxyPassword" type="password" [readonly]="readonly" />
                </mat-form-field>
            </div>
        </div>
        <div class="flex gap-x-4">
            <div class="w-full">
                <mat-form-field>
                    <mat-label>
                        Communications Timeout
                        <i
                            class="fa fa-info-circle"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="When communication with this remote process group takes longer than this amount of time, it will timeout."></i>
                    </mat-label>
                    <input matInput formControlName="communicationsTimeout" type="text" [readonly]="readonly" />
                </mat-form-field>
            </div>
            <div class="w-full">
                <mat-form-field>
                    <mat-label>
                        Yield Duration
                        <i
                            class="fa fa-info-circle"
                            nifiTooltip
                            [tooltipComponentType]="TextTip"
                            tooltipInputData="When communication with this remote process group fails, it will not be scheduled again until this amount of time elapses."></i>
                    </mat-label>
                    <input matInput formControlName="yieldDuration" type="text" [readonly]="readonly" />
                </mat-form-field>
            </div>
        </div>
    </mat-dialog-content>
    @if ({ value: (saving$ | async)! }; as saving) {
        <mat-dialog-actions align="end">
            @if (readonly) {
                <button mat-flat-button mat-dialog-close>Close</button>
            } @else {
                <button mat-button mat-dialog-close>Cancel</button>
                <button
                    [disabled]="
                        !editRemoteProcessGroupForm.dirty ||
                        editRemoteProcessGroupForm.invalid ||
                        saving.value ||
                        editRemoteProcessGroupForm.pending
                    "
                    type="button"
                    (click)="submitForm()"
                    mat-flat-button>
                    <span *nifiSpinner="saving.value">Apply</span>
                </button>
            }
        </mat-dialog-actions>
    }
</form>
